<template>
  <div>
    <Category />
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <template #header>
        <div>
          <el-button type="primary" size="default" :icon="Plus" @click="">添加属性</el-button>

        </div>
      </template>
      <el-table style="width: 100%" :data="attrList">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="attrName" label="属性名称" width="180" />
        <el-table-column prop="attrValueList" label="属性值名称列表">
          <template #default="{ row }">
            <el-tag v-for="item in row.attrValueList" :key="item.id" type="danger" class="mx-1" effect="dark">
              {{  item.valueName  }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="180">
          <el-button type="warning" size="default" :icon="Edit" @click=""></el-button>
          <el-button type="danger" size="default" :icon="Delete" @click=""></el-button>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Attr",
});
</script>

<script setup lang="ts">
import { watch, ref } from 'vue'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { requestattrList, requestDeleteAttr, requestUpdateOrAddAttr } from '@/api/attr'
import useAttrStore from '@/stores/attr'
import { storeToRefs } from 'pinia'
import type { attrListType } from '@/api/attr'

const attrList = ref<attrListType>([])

const attrStore = useAttrStore()
const { category1Id, category2Id, category3Id } = storeToRefs(attrStore)
//当三级列表有数据的时候,获取数据
//watch的回调函数接收两个参数newValue和oldValue
watch(category3Id, async (newValue) => {
  if (!newValue) return
  const result = await requestattrList(category1Id.value as number, category2Id.value as number, category3Id.value as number)
  attrList.value = result
}, { immediate: true })
</script>
<style>
</style>